<template>
	<view class="index">
		
		<search-button :hotKeyword="hotKeyword"></search-button>
		
		
		<!-- 他说你任何为人称道的美丽不及他第一次遇见你 -->
		<!-- 轮播图区域 -->
		<swiper autoplay 
		indicator-dots indicator-color="ivory" indicator-active-color="skyblue">
			<swiper-item v-for="(item,index) in SwiperList" :key="item.bannerId">
				<!-- 因为每个type=imgid 里的图片名称不同 -->
				<image :src="item.pic ? item.pic : item.imageUrl"></image>
			</swiper-item>		
		</swiper>
		
		<!-- 导航区 -->
		<view class="navs">
			<view class="navItem" @click="navItemClick(item.path)"
			v-for="(item,index) in navs" :key="index">
				<view :class="item.icont"></view>
				<text>{{item.title}}</text>
			</view>
		</view>
		
		<!-- 推荐歌曲 -->
		<view class="recommendSongs">
			<!-- 头部区域 3.使用自定义组件-->
			<nav-header title="推荐歌曲" nav="为你精心推荐"></nav-header>
			
			<!-- 内容区 -->
			<scroll-view class="recommendScroll" scroll-x  enable-flex="true">
				<view @tap="toSongSheetDetail(item.id)" class="scrollItem" v-for="item in recommendList" :key="item.id">
					<image :src="item.picUrl"></image>
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		
		
		
		<!-- 排行榜区域 -->
		<view class="topList">
			<nav-header title="排行榜" nav="热歌风向标"></nav-header>
			
			<!-- swiper属性具体参考官网 -->
			<swiper class="topListSwiper" circular previous-margin="50rpx" next-margin="50rpx">
				<swiper-item v-for="(item,index) in topList" :key="item.name">
					<view class="swiperItem">
						<view class="title">{{item.name}}</view>
						<view @tap="toSongDetail(musicItem.id,index)" class="musicItem" v-for="(musicItem,musicIndex) in item.tracks" :key="musicItem.id">
							<image :src="musicItem.al.picUrl"></image>
							<text class="count">{{musicIndex + 1}}</text>
							<text class="name">{{musicItem.name}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
	// 1.导入自定义组件navHeader
	
	import navHeader from '../../components/navHeader/navHeader'
	import searchButton from '../../components/searchButton/searchButton'
	// import request from '../../util/request.js'
	export default {
		data(){
			return {
				// 轮播图数据
				SwiperList:[],
				imgId:2,
				// 推荐歌单数据
				recommendList:[],
				// 排行榜数据
				topList:[],
				allTopList:[], // 存放所有排行榜数据
				hotKeyword:'', // 热歌词
				index:0, // 切换歌曲的下标
				nowTopListIndex:0, // 切换歌曲当前下标的当前排行榜
				songId:'',
				// 导航区数据
				navs:[
					{
						icont:'iconfont icon-meirituijian',
						title:'每日推荐',
						path:'/pages/recommendSong/recommendSong'
					},
					{
						icont:'iconfont icon-gedan1',
						title:'歌单',
						path:'/pages/songSheetSquare/songSheetSquare'
					},
					{
						icont:'iconfont icon-paihangbang',
						title:'排行榜',
						path:'/pages/topList/topList'
					},
					{
						icont:'iconfont icon-diantai1',
						title:'电台',
						path:''
					},
					{
						icont:'iconfont icon-zhibo',
						title:'直播',
						path:''
					}
				]
			}
		},
		// 2.注册自定义组件
		components:{"nav-header": navHeader,"search-button":searchButton},
		onLoad() {
			this.getSwiperList()
			this.getRecommendSongs()
			this.getTopList() // 获取排行榜
			this.getHotKeywords() // 获取热歌词
			// 用在这个方法 H5报错、
			// this.$refs.searchButton.getHotKeywords() // 获取子组件的方法 热歌词
			
			// 订阅方,来自songDetail传过来的参数type
			// uni.$on('switchType',(type) => {
			// 	console.log(type,'我要切歌了');
			// 	if(type === 'pre'){ // 切换上一首
			// 		(this.index === 0) && (this.index = this.topList[this.nowTopListIndex].tracks.length)
			// 		this.index -= 1
			// 	}else {// 切换下一首
			// 		if(this.index === this.topList[this.nowTopListIndex].tracks.length - 1) {this.index = -1}
			// 		this.index += 1
			// 	}
			// 	let musicId = this.topList[this.nowTopListIndex].tracks[this.index].id
			// 	// 将musicId 回传给songDetail页面
			// 		uni.$emit('musicId',musicId)
			// 		console.log('true');
			// })
		},
		// onUnload() {
		// 	uni.$off('switchType');  
		// },
		
		methods: {
			// 获取热歌词
			async getHotKeywords(){
				const res = await this.$myRequest('/search/default')
				this.hotKeyword = res.data.showKeyword
			},
			// 导航栏点击跳转
			navItemClick(path){
				console.log("我被点了~")
				console.log(path);
				uni.navigateTo({
					url:path
				})
			},
			async getSwiperList (){
				console.log('请求轮播图数据')
				// uni.request({
				// 	url:'http://localhost:3000/banner',
				// 	请求参数
				// data:{type:this.imgId},
				// 	success:res => {
				// 		if(res.data.code !== 200){
				// 			return uni.showToast({
				// 				title:'获取数据失败'
				// 			})
				// 		}
				// 		console.log(res)
				// 		this.SwiperList = res.data.banners
				// 	}
				// })
				// 第二次封装
				let res = await this.$myRequest('/banner',{type:this.imgId})
				this.SwiperList = res.banners
				// this.imgId++
				// console.log(res)
			},
			// 获取推荐歌单数据
			async getRecommendSongs(){
				// imlit请求多少条数据 最大30条
				const res = await this.$myRequest('/personalized')
				this.recommendList = res.result
				// console.log(res)
			},
			// 获取所有榜单
			async getTopList(){
				const res = await this.$myRequest('/toplist')
				// splice(会修改原数组，可以对指定的数组进行增删改)
				this.allTopList = res
				// res.list.splice(5) // 只要5个 其余全不要
				let toplist = res.list.slice(0,6) // 从0开始截取
				console.log(toplist);
				let index = 0
				let topListItem = {}
				while(index < 6){
					// 获取歌单详情
					let topListData = await this.$myRequest('/playlist/detail',{
						id: toplist[index].id
					})
					// 因为排行榜数据太多太大,所以把我们需要属性单独的取出来
					topListItem = { 
						name: topListData.playlist.name, 
						id: topListData.playlist.id, 
						// slice(不会修改原数组) 从0开始截取 ，截取3个 0 1 2
						tracks: topListData.playlist.tracks.slice(0, 3) 
						}
					// 每循环一次收集一次数据,直到5次
					// 不需要等待五次请求全部结束才更新，用户体验较好，但是渲染次数会多一些
					this.topList.push(topListItem)
					index++
				}
				// 更新topList的状态值, 
				// 放在此处更新会导致发送请求的过程中页面长时间白屏，用户体验差
				// this.topList = resultArr
				// console.log(this.topList)
				console.log(this.topList)
				// console.log(this.topList)
				this.topList.push(topListItem)
				// this.topList.push(topListItem)
			},
			// 点击排行榜上的歌曲跳转至songdetail页面播放
			toSongDetail(songId,index){
				this.nowTopListIndex = index
				this.songId = songId
				uni.navigateTo({
					url:'/pages/songDetail/songDetail?songId=' + songId
				})
			},
			// 点击跳转到歌单详情页
			toSongSheetDetail(songSheetId){
				uni.navigateTo({
					url:'/pages/songSheetDetail/songSheetDetail?songSheetId=' + songSheetId
				})
			}
		}
	}
</script>

<style lang="scss">
	.index{
		swiper{
			width: 100%;
			height: 300rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		// 导航区域样式
		.navs{
			// 横排显示
			display: flex;
			.navItem{
				// 5个区域 每个占25%
				width: 20%;
				text-align: center;
				
				view{
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					background-color: $cloundMusic-color;
					border-radius: 50%;
					// 图片居中
					margin: 20rpx auto 10rpx;
					// 修改图标颜色大小
					color: #fff;
					font-size: 50rpx;
				}
				// 设置所有图标大小
				.iconfont{
					font-size: 55rpx;
					
				}
				text{
					font-size: 26rpx;
				}
			}
		}
		
		// 推荐歌曲样式
		.recommendSongs {
			padding: 20rpx;
			
		}
		
		// 推荐内容区样式
		.recommendScroll {
			/* #ifdef MP-WEIXIN */
			display: flex;
			height: 300rpx;
			/* #endif */
			
			/* #ifdef H5 */
			white-space: nowrap; // H5支持横向排列滚动必须加的属性
			/* #endif */
			
			.scrollItem {
				/* #ifdef H5 */
				display: inline-block;// H5支持
				/* #endif */
				
				width: 200rpx;
				margin-right: 20rpx;
				
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
				text {
					/* 单行文本溢出隐藏 省略号代替 */
					// display: block;
					// white-space: nowrap; /* 换行 */
					// overflow: hidden;	/* 隐藏 */
					// text-overflow: ellipsis; /*省略号代替*/
					/* 多行文本溢出隐藏 省略号代替*/
					font-size: 26rpx;
					overflow: hidden; 
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical; /*设置对其模式*/
					-webkit-line-clamp: 2; /*设置多行的行数*/
					
				}
			}
		}
		
		 // 排行榜样式
		 .topList {
			 padding: 20rpx;
			 
			 .topListSwiper{
				 // 改一下swiper的默认宽高
				 height: 400rpx;
				 .swiperItem {
					 // 使能看到下一栏多出来
					 width: 96%;
					 background-color: #fbfbfb;
					 .title {
						 // font-size: 30rpx;
						 // line-height: 80rpx;
						 padding-bottom: 20rpx;
					 }
					 .musicItem {
						 /* 当一个元素设置为flex，其子元素会自动成为block元素*/
						 display: flex;// 使图片和文字居中对齐
						 margin-bottom: 20rpx;
						 image{
							 width: 100rpx;
							 height: 100rpx;
							 border-radius: 10rpx;
						 }
						 .count {
							 width: 100rpx;
							 height: 100rpx;
							 text-align: center;
							 line-height: 100rpx;
						 }
						 .name {
							 height: 100rpx;
							 line-height: 100rpx;
							 // 解决歌名太长导致挤压
							 max-width: 400rpx;
							 white-space: nowrap;
							 overflow: hidden;
							 text-overflow: ellipsis;
						 }
					 }
				 }
			 }
		 }
	}
</style>